<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="album of albums">
            <h2>{{album.title}}</h2>
            <ul>
                <li v-for="music of album.musics">
                    歌曲：{{music.name}}----时长：{{music.duration}}

                </li>
            </ul>
            <button @click="buy(album)">购买</button>
        </div>

        <h3></h3>购物车：
        <ul>
            <li v-for="item of shopingCar">
                {{item.title}}---{{item.count}}
            </li>
        </ul>
    </div>

<script>
    let albums=[
        {title:'新长征路上的摇滚',price:28,musics:[{
                name:'一块红布',duration:120
            },{
                name:'最后一枪',duration:180
            }
            ]},

        {title:'解决',price:76,musics:[{
                name:'解决',duration:170
            },{
                name:'好时光',duration:220
            }
            ]}
    ];
    new Vue({
        el:'#app',
        data:{albums:albums,shopingCar:[]},
        methods:{
            buy(album){
                let index=this.shopingCar.findIndex((item)=>item.title==album.title);
                if(index>=0){
                    this.shopingCar[index].count++;
                }
                else{
                    this.shopingCar.push({title:album.title,count:1})
                }
            }
        }

    })




</script>
</body>
</html>